import React,{useState, useEffect } from 'react'
import '../../css/yym/Status.css'

export default function Status() {
    let status=JSON.parse(localStorage.getItem('statusInfo'))

    let itemList = [
        { item: 'paper', name: '厕纸', status: '', text: '厕纸' },
        { item: 'soap', name: '洗手液', status: '', text: '洗手液' },
        { item: 'blower', name: '烘干K', status: '', text: '干手设备' },
        { item: 'hotWater', name: '热水', status: '', text: '热水' },
        { item: 'airCon', name: '空调', status: '', text: '空调' },
        { item: 'nursery', name: '母婴室', status: '', text: '母婴室' },
        { item: 'flushing', name: '淋浴', status: '', text: '冲洗设备' },
        { item: 'rest', name: '购买休息室', status: '', text: '休息空间' },
        { item: 'WIFI', name: 'WIFI', status: '', text: 'WIFI' },
        { item: 'charge', name: '充电', status: '', text: '充电设备' },
        { item: 'emergency', name: 'SOS', status: '', text: '应急呼救' },
    ]

    const [List, setList] = useState([])

    useEffect(() => {
        
        itemList.forEach((ele) => {
            ele.status = status[ele.item]
        })
        setList(itemList)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return (
        <div>
            <div className='status'>
                <div className='text'>状态:</div>
                <span className={status.status ? 'green' : 'red'}>{status.status ? '正常启用' : '故障维修'}</span>
            </div>

            <div className='status'>
                <div className='text' style={{ marginTop: '40px' }}>公厕配置:</div>

                <div style={{ display: 'flex', flexWrap: 'wrap', width: '65%' }}>
                    {
                        List.map((ele) => (
                            <div style={{ marginLeft: '20px', width: '100px' }} key={ele.item}>
                                <div style={{ display: 'flex', justifyContent: 'center' }}>
                                    {ele.status ? <img src={require(`../img/${ele.name}.png`)} alt="" className='simg' /> : <img src={require(`../img/${ele.name} (1).png`)} alt="" className='simg' />}
                                </div>
                                <div style={{ textAlign: 'center', marginTop: '10px' }} className='text1'>
                                    {ele.text}
                                </div>
                            </div>
                        ))
                    }
                </div>

            </div>

            <div className='QR'>
                <div className='text2' style={{padding:'5px',backgroundColor:'#A4ADB3',color:'white',borderRadius:'5px',height:'24px'}}>公厕二维码</div>
                <img src={require('../img/1.png')} alt="" style={{marginLeft:'40px'}}/>
            </div>
        </div>
    )
}
